<script setup>
defineProps( {
  progress: Number
})
</script>

<template>
  <view class="progress_box">
    <view class="progress_bar" :style="{width: `${progress}%`}"></view >
  </view>
</template>

<style scoped lang="scss">
.progress_box{
  width: 100rpx;
  height: 16rpx;
  background: #FDEBD8; /* 透明背景，以便显示渐变背景 */
  border-radius: 6rpx;
  overflow: hidden;
  .progress_bar{
    height: 100%;
    background: linear-gradient( 270deg, #FF8312 0%, #FF4E2C 100%); /* 设置渐变色 */
    border-radius: 6rpx 0 0 6rpx;
    transition: width 0.5s ease-in-out; /* 平滑过渡效果 */
  }
}
</style>